@gray: #333;
@color: #188fff;
@color2: #49b0ff;
@color3: #7680ff;

@baseWidth: 720;
.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){
	@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){
	@{atr}: unit(@px*10/@baseWidth , rem);
}

.Comm{
    display: flex;
    flex-wrap: wrap;
    .items{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        .px2rem(border-radius, 10);
        overflow: hidden;
        .header{
            text-align: center;
            background-color: @color;
            color: #fff;
            .px2rem(padding-top, 8);
            .px2rem(padding-bottom, 8);
            &2{
                text-align: left;
            }
            span{
                .px2rem(font-size, 18);
                white-space: nowrap;
            }
            .icon{
                display: inline-block;
                .px2rem(font-size, 24);
                .px2rem(padding-right, 2);
                .px2rem(height, 24);
            }
        }
        // type1
        .type1{
            text-align: center;
            .px2rem(padding-top, 12);
            .px2rem(padding-bottom, 16);
            .num{
                .px2rem(font-size, 24);
                .px2rem(line-height, 32);
                .px2rem(margin-bottom, 10);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .text{
                border: 1px solid #4fc17c;
                color: #4fc17c;
                .px2rem(border-radius, 12);
                .px2rem(padding-left, 8);
                .px2rem(padding-right, 8);
                .px2rem(font-size, 16);
                .px2rem(line-height, 22);
                display: inline-block;
            }
        }
        // type2
        .type2{
            .px2rem(padding, 12);
            .px2rem(padding-left, 22);
            .px2rem(font-size, 18);
            .px2rem(line-height, 30);
            color: #666;
            label{
                display: block;
                span{
                    &.success{
                        color: #4fc17c;
                    }
                    &.error{
                        color: #f00;
                    }
                }
                &:nth-child(3){
                    span{
                        color: #f00;
                    }
                }
            }
        }
        // type3
        .type3{
            .px2rem(padding, 12);
            .px2rem(padding-left, 22);
            .px2rem(font-size, 16);
            .px2rem(line-height, 30);
            color: #666;
            .num{
                color: #4482ff;
                .px2rem(font-size, 26);
                text-align: center;
            }
            label{
                display: block;
                span{
                    font-weight: bold;
                }
            }
        }


        &.isColorful{
            text-align: left;
            border: 1px solid #4482ff;
        }
        &.isColorful:nth-child(4n-3){
            .header{
                background-color: #4482ff;
            }
        }
        &.isColorful:nth-child(4n-2){
            border-color: #49b0ff;
            .header{
                background-color: #49b0ff;
            }
        }
        &.isColorful:nth-child(4n-1){
            border-color: #7680ff;
            .header{
                background-color: #7680ff;
            }
        }
        &.isColorful:nth-child(4n){
            border-color: #8a5cfd;
            .header{
                background-color: #8a5cfd;
            }
        }
        margin: 2%;
        &.col-12{
            width: 46%;
        }
        &.col-8{
            width: 29%;
        }
        
        .inner{
            flex: 1;
            .num{
                font-weight: normal;
                .px2rem(font-size, 28);
                .px2rem(line-height, 36);
            }
            .text{
                .px2rem(font-size, 18);
                color: #333;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: block;
            }
        }
    }
}